/**
  common css
 */
*,*::after,*::before {
  box-sizing: border-box;
}

ul,li {
  list-style: none;
  padding: 0;
  margin:0;
}

.clearfix::after {
  content:'';
  display: block;
  clear:both;
}

@font-face {
  font-family: 'Cookie';
  font-style: normal;
  font-weight: 400;
  src: local('Cookie-Regular'), url(https://fonts.gstatic.com/s/cookie/v11/syky-y18lb0tSbf9kgqS1NDNpg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/**
  component css
 */
.global-loading {
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index: 100;
  background: #fdfdfd;
  .loading-img {
    position: absolute;
    top:40%;
    left:50%;
    transform: translate(-50%,-50%);
    img {
      width: 64px;
      height: 64px;
    }
  }
}

.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.empty-wrapper {
  text-align:center;
  padding: 32px 16px 16px;
  .empty-icon {
    width: 80px;
    height: 80px;
    text-align: center;
    fill:#ddd;
  }
}
main {
  padding:16px 0;
}
.index-wrapper {
  max-width: 960px;
  margin:0 auto;
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:4px 0;
    border-bottom: 1px solid #ddd;
    .logo {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: 400;
      img {
        width: 30px;
      }
      .logo-text {
        font-family: 'Cookie',cursive;
        font-size: 27px;
        margin-top: 6px;
        margin-left: 6px;
        color: #ba9186;
      }
    }
  }
  .tomato-app-action {
    .tomatoes-outer,.todos-outer {
      width: calc(50% - 8px);
      padding:16px;
      border:1px solid #ddd;
      border-radius: 4px;
      box-shadow:  2px 2px rgba(225,225,225,.2);
      background: #fff;
    }
    .tomatoes-outer {
      float: left;
    }
    .todos-outer {
      float: right;
      .todo-items {
        border-top: 1px solid #ddd;
        margin-top: 16px;
        &.completed {
          margin-top: 0px;
          border-top:none;
          .ant-collapse-no-arrow {
            border-bottom: none;
            .ant-collapse-header {
              padding-top:8px;
              padding-bottom:8px;
              padding-left: 0;
              .ant-btn {
                border: 1px solid #ccc;
                padding: 4px;
                font-size: 13px;
                color:#888;
              }
            }
          }
        }
      }
    }
  }
}